<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>自行车</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0
    }
    
    ol,
    ul {
        list-style: none/*去掉圆点或数字*/
    }
    
    .cycle-outer {
        width: 534px;
        height: 260px;
        position: absolute;
        /*绝对定位*/
        top: 50%;
        /*距离顶部*/
        margin: -160px 0 0 -267px;
        /*距离外边距*/
        left: 50%;
    }
    
    .cycle-wrapper {
        width: 534px;
        height: 260px;
        margin: 0 auto;
        position: relative;
        /*相对定位*/
    }
    
    .cycle-wheel-front {
        /*前轮*/
        margin: 100px 0 0 330px;
    }
    
    .cycle-wheel-back {
        /*后轮*/
        margin: 100px 0 0 0px;
    }
    
    .cycle-wheel-outer {
        background: transparent;
        border: 5px solid #aaa;
        border-radius: 50%;
        /*画外轮圆圈*/
        width: 190px;
        height: 190px;
        position: absolute;
        margin-top: 5px;
        animation: wheel-rotate 2s linear infinite;
        /*定义动画*/
    }
    /*轮胎开始旋转*/
    
    @keyframes wheel-rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    .cycle-wheel-outer:after {
        /*插入内轮胎圆圈*/
        background: transparent;
        border: 4px solid #EF9058;
        border-radius: 50%;
        width: 176px;
        height: 176px;
        position: absolute;
        margin: 3px;
        content: "";
    }
    
    .spoke {
        /*开始画车轮线条*/
        position: absolute;
        width: 1px;
        height: 200px;
        background: #ccc;
        margin: -5px 0 0 95px;
        z-index: 0;
    }
    
    .spoke:after {
        /*在后面插入两条*/
        content: "";
        position: absolute;
        width: 1px;
        height: 200px;
        background: #ccc;
        transform: rotate(120deg);
    }
    
    .spoke:before {
        /*在前面插入两条*/
        content: "";
        position: absolute;
        width: 1px;
        height: 200px;
        background: #ccc;
        transform: rotate(240deg);
    }
    /*轮胎线条完成*/
    
    .spoke-container li:nth-child(2) {
        /*中心点旋转*/
        transform: rotate(30deg);
    }
    
    .inner-disc {
        /*画中心轴圆点*/
        background: #666;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        margin: -10px 0 0 -10px;
        top: 50%;
    }
    /*.cycle-wheel-back .inner-disc:after {
    content: "";
    background: #666;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    margin: -10px 0 0 -10px;
    top: 50%;
   }*/
    
    .inner-disc-2 {
        /*画轮胎中心轴的圆圈*/
        background: transparent;
        width: 6px;
        height: 6px;
        border: 2px solid #FFF;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        margin: -5px 0 0 -5px;
        top: 50%;
    }
    
    .cycle-wheel-back .inner-disc-2:after {
        /*插入后轮轴心齿轮*/
        content: "";
        background: transparent;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        margin: -13px 0 0 -13px;
        top: 50%;
        border: 4px dotted #666;
    }
    
    .cycle-body {
        margin-left: 125px;
    }
    
    .front-wheel-frame {
        /*前叉*/
        background: #5E999B;
        width: 8px;
        height: 180px;
        position: absolute;
        z-index: 2;
        transform: rotate(-25deg);
        margin: -72px 0 0 260px;
    }
    
    .top-frame {
        /*上管*/
        background: #5E999B;
        width: 180px;
        height: 8px;
        position: absolute;
        z-index: 2;
        margin: -20px 0 0 62px;
        transform: rotate(-8deg);
    }
    
    .front-frame {
        /*下管*/
        background: #5E999B;
        width: 8px;
        height: 160px;
        position: absolute;
        z-index: 2;
        transform: rotate(41deg);
        margin: -36px 0 0 189px;
    }
    
    .center-frame {
        /*坐杆*/
        background: #5E999B;
        width: 8px;
        height: 205px;
        position: absolute;
        z-index: 2;
        transform: rotate(-33deg);
        margin: -84px 0 0 75px;
    }
    
    .back-frame {
        /*后管*/
        background: #5E999B;
        width: 8px;
        height: 136px;
        position: absolute;
        z-index: 2;
        transform: rotate(39deg);
        margin: -23px 0 0 19px;
    }
    
    .bottom-frame {
        /*后叉or平管*/
        background: #5E999B;
        width: 159px;
        height: 8px;
        position: absolute;
        z-index: 2;
        margin: 100px 0 0 -16px;
    }
    
    .handlebar-front {
        /*车把*/
        width: 60px;
        height: 8px;
        background: #5E999B;
        z-index: 2;
        position: absolute;
        margin: -68px 0 0 222px;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
    }
    
    .handlebar-curve {
        /*车把手*/
        width: 40px;
        height: 40px;
        border: 8px solid #666;
        border-top-right-radius: 100%;
        border-bottom-right-radius: 100%;
        border-bottom-left-radius: 100%;
        background: transparent;
        position: absolute;
        margin: -68px 0 0 258px;
        border-left: 8px solid transparent;
        border-top: 8px solid #666;
        border-bottom: 8px solid #666;
    }
    /*座垫*/
    
    .seat {
        width: 50px;
        height: 10px;
        background: #666;
        border-radius: 44%;
        position: absolute;
        margin: -73px 0 0 15px;
    }
    
    .seat:after {
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 0 40px 16px 40px;
        border-color: transparent transparent #666 transparent;
        content: "";
        position: absolute;
        z-index: 3;
        transform: rotate(-12deg);
        position: absolute;
        border-radius: 100%;
        margin: 0 0 0 -26px;
    }
    
    .seat:before {
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 0 40px 16px 40px;
        border-color: transparent transparent #666 transparent;
        content: "";
        position: absolute;
        z-index: 3;
        transform: rotate(179deg);
        position: absolute;
        border-radius: 100%;
        margin: 0 0 0 -26px;
    }
    
    .seat span {
        width: 32px;
        height: 19px;
        background: #666;
        border-radius: 100%;
        position: absolute;
        margin: 1px 0 0 -22px;
        transform: rotate(-11deg);
    }
    /*去掉中心轴的*/
    
    .chain-rotation {
        position: absolute;
        z-index: 16;
    }
    /*中心轴*/
    
    .chain-disc-inner {
        background: #666;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        position: absolute;
        margin: 2px;
        z-index: 4;
    }
    
    .chain-disc-outer {
        background: #FFF;
        width: 22px;
        height: 22px;
        border: 5px solid #666;
        border-radius: 50%;
        position: absolute;
        margin: 87px 0 0 250px;
        z-index: 3;
        content: "";
    }
    /*牙盘*/
    
    .chain-rods {
        height: 70px;
        width: 6px;
        background: #666;
        position: absolute;
        margin: 67px 0 0 263px;
        z-index: 15;
        animation: wheel-rotate 2s linear infinite;
    }
    
    .chain-rods:before {
        content: "";
        height: 70px;
        width: 6px;
        background: #666;
        position: absolute;
        transform: rotate(120deg);
    }
    
    .chain-rods:after {
        content: "";
        height: 70px;
        width: 6px;
        background: #666;
        position: absolute;
        transform: rotate(240deg);
        -webkit-transform: rotate(240deg);
        -moz-transform: rotate(240deg);
    }
    
    .outer-axle {
        height: 70px;
        width: 70px;
        border-radius: 50%;
        background: transparent;
        border: 5px solid #666;
        position: absolute;
        margin: 62px 0 0 226px;
        z-index: 3;
    }
    
    .outer-axle:after {
        content: "";
        height: 74px;
        width: 74px;
        border-radius: 50%;
        background: transparent;
        border: 5px dotted #666;
        margin: -7px;
        position: absolute;
        z-index: 3;
        animation: wheel-rotate 2s linear infinite;
    }
    /*车链子*/
    
    .chain-up {
        background-color: transparent;
        background-size: 8px 2px;
        background-position: 0 0, 30px 30px;
        width: 155px;
        height: 4px;
        position: absolute;
        z-index: 9;
        background: #EEE;
        transform: rotate(-11deg);
        margin: 76px 0 0 98px;
    }
    
    .chain-up:before {
        content: "";
        background-color: transparent;
        background-image: linear-gradient(90deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666);
        background-size: 8px 2px;
        background-position: 0 0, 30px 30px;
        width: 155px;
        height: 4px;
        animation: chainUp 2s linear infinite;
        position: absolute;
        z-index: 10;
    }
    
    .chain-bottom {
        background-color: transparent;
        background-size: 8px 2px;
        background-position: 0 0, 30px 30px;
        width: 155px;
        height: 4px;
        position: absolute;
        z-index: 9;
        background: #EEE;
        -webkit-transform: rotate(9deg);
        -moz-transform: rotate(9deg);
        transform: rotate(9deg);
        margin: 127px 0 0 98px;
    }
    
    .chain-bottom:before {
        content: "";
        background-color: transparent;
        background-image: linear-gradient(90deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666);
        background-size: 8px 2px;
        background-position: 0 0, 30px 30px;
        width: 155px;
        height: 4px;
        animation: chainDown 2s linear infinite;
        position: absolute;
        z-index: 10;
    }
    /*脚踏*/
    
    .pedal-rod {
        height: 120px;
        width: 6px;
        background: #666;
        position: absolute;
        margin: -25px 0 0 0px;
    }
    
    .pedal-rod:before {
        width: 40px;
        height: 10px;
        background: #666;
        position: absolute;
        margin: 10px;
        content: "";
        margin: -7px -17px;
        animation: pedal1 2s linear infinite;
    }
    
    .pedal-rod:after {
        width: 40px;
        height: 10px;
        background: #666;
        position: absolute;
        margin: 10px;
        content: "";
        margin: 119px -17px;
        animation: pedal2 2s linear infinite;
    }
    /*水壶架*/
    
    .bottle-holder {
        width: 20px;
        height: 36px;
        background: #daeded;
        border: 3px solid #5E999B;
        position: absolute;
        margin: 54px 0 0 -25px;
    }
    
    .bottle-holder:after {
        width: 20px;
        height: 3px;
        content: "";
        background: #5E999B;
        position: absolute;
        margin: 24px 0 0 0px;
    }
    /*水壶*/
    
    .bottle-holder:before {
        background-color: #daeded;
        width: 18px;
        height: 10px;
        border-radius: 30% / 100%;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        content: "";
        position: absolute;
        margin-top: -13px;
        border: 1px solid #98baba;
        border-bottom: 0;
    }
    
    .bottle-holder span {
        position: absolute;
        width: 9px;
        height: 4px;
        background: #666;
        margin: -17px 0 0 5px;
    }
    /*车链子动画*/
    
    @keyframes chainUp {
        0% {
            background-position: 0 25%;
        }
        100% {
            background-position: 100% 0;
        }
    }
    
    @keyframes chainDown {
        0% {
            background-position: 100% 0;
        }
        100% {
            background-position: 0 25%;
        }
    }
    /*脚踏动画*/
    
    @keyframes pedal1 {
        0% {
            transform: rotate(00deg);
        }
        25% {
            transform: rotate(-140deg);
        }
        50% {
            transform: rotate(-180deg);
        }
        75% {
            transform: rotate(-240deg);
        }
        100% {
            transform: rotate(-360deg);
        }
    }
    
    @keyframes pedal2 {
        0% {
            transform: rotate(00deg);
        }
        25% {
            transform: rotate(-60deg);
        }
        50% {
            transform: rotate(-180deg);
        }
        75% {
            transform: rotate(-340deg);
        }
        100% {
            transform: rotate(-360deg);
        }
    }
    </style>
</head>

<body>
    <div class="cycle-outer">
        <div class="cycle-wrapper">
            <!--
                 描述：车架
                -->
            <div class="cycle-body">
                <div class="seat">
                    <span></span>
                </div>
                <div class="front-wheel-frame"></div>
                <div class="top-frame"></div>
                <div class="front-frame">
                    <div class="bottle-holder">
                        <span></span>
                    </div>
                </div>
                <div class="center-frame"></div>
                <div class="back-frame"></div>
                <div class="bottom-frame"></div>
                <div class="handlebar-front"></div>
                <div class="handlebar-curve"></div>
            </div>
            <!--
                 描述：后轮
                -->
            <div class="cycle-wheel cycle-wheel-back">
                <div class="cycle-wheel-outer">
                    <div class="cycle-wheel-inner">
                        <div class="cycle-wheel-inner-padding">
                            <ul class="spoke-container">
                                <li class="spoke"></li>
                                <li class="spoke"></li>
                            </ul>
                            <div class="inner-disc"></div>
                            <div class="inner-disc-2"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!--
                 描述：前轮
                -->
            <div class="cycle-wheel cycle-wheel-front">
                <div class="cycle-wheel-outer">
                    <div class="cycle-wheel-inner">
                        <div class="cycle-wheel-inner-padding">
                            <ul class="spoke-container">
                                <li class="spoke"></li>
                                <li class="spoke"></li>
                            </ul>
                            <div class="inner-disc"></div>
                            <div class="inner-disc-2"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!--
                 描述：中心轴  车链子 牙盘 水壶架  水壶   脚踏
                -->
            <div class="chain-up"></div>
            <div class="chain-bottom"></div>
            <div class="chain-rotation">
                <div class="outer-axle"></div>
                <div class="chain-disc-outer">
                    <div class="chain-disc-inner"></div>
                </div>
            </div>
            <div class="chain-rods">
                <div class="pedal-rod"></div>
            </div>
        </div>
    </div>
    <div style="text-align:center;clear:both;">
</body>

</html>
